<!--
 * @Author: lhl
 * @Date: 2021-12-30 08:33:15
 * @LastEditTime: 2022-01-06 19:04:07
 * @LastEditors: lhl
 * @Description: 数据月报
 * @FilePath: \briup\teamwork\briup-webUI-2group-teamwork\am-ui\src\pages\am\monitor\Monthly.vue
 * 别乱动！
-->
<template>
  <div class="Monthly">
    <div class="content">
      <div class="left">
        <el-input v-model="keyWords" placeholder="请输入关键字" clearable @input="toHandler"></el-input>
        <!-- 工程设备树 -->
        <el-tree :data="edTree" :props="props" @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="right">
        <div v-if="params.device_id">
          <!-- 搜索框和下载按钮区域-->
          <div class="header">
            <!-- 选择月份区域 -->
            <div class="block">
              <el-date-picker v-model="params.date" type="month" placeholder="选择月份">
              </el-date-picker>
              <el-button type="primary" @click="toSearchHandler" size="small">搜索</el-button>
            </div>
          </div>
          <div class="tablecontent">
            <!-- {{ monthData }} -->
            <template>
              <el-table :data="monthData" stripe style="width: 100%">
                <el-table-column prop="d" label="日期" width="180px">
                </el-table-column>
                <el-table-column prop="tsp" label="tsp"> </el-table-column>
                <el-table-column prop="pm10" label="pm10"> </el-table-column>
                <el-table-column prop="pm25" label="pm2.5"> </el-table-column>
                <el-table-column prop="temperature" label="温度">
                </el-table-column>
                <el-table-column prop="humidity" label="湿度">
                </el-table-column>
                <el-table-column prop="wind_direction" label="风向">
                </el-table-column>
                <el-table-column prop="wind_speed" label="风速">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <div v-else class="notice">请先选择工程下的设备</div>
      </div>
    </div>
  </div>
</template>     
<script>
import { get } from '@/utils/request.js'

export default {
  data() {
    return {
      abcd: [],
      edTree: [],
      props: {
        label: 'name',
        value: 'id'
      },
      params: {
        page: 1,
        pageSize: 100
      },
      monthData: [],
      keyWords: '',
      value1: ''
    }
  },
  methods: {
    // 树形节点点击事件
    handleNodeClick(data) {
      // 判断用户点击的是否是设备，点击工程时不查询数据
      if (data.engineer_id) {
        this.params = {
          ...this.params,
          engineer_id: data.engineer_id,
          device_id: data.id
        }
        this.params.date = null
        // 调用请求数据的方法
        this.queryMonthData()
        this.toSearchHandler()
      }
    },
    //查询所有工程名称
    findEngineername() {
      get('/engineer/pageQuery', {
        page: 1,
        pageSize: 10
      }).then(res => {
        this.engineers = res.data.list
      })
    },

    // 查询工程设备树
    findEngineerDeviceTree() {
      get('/engineer/findEngineerDeviceTree').then(res => {
        this.edTree = res.data
      })
    },
    MonthData() {},
    // 根据工程设备ID检索该月设备数据
    queryMonthData() {
      get('/monitor/queryMouthData', this.params).then(res => {
        this.monthData = res.data
      })
    },
    toSearchHandler() {
      this.queryMonthData()
    },
    //模糊搜索关键字
    toHandler() {
      if (this.keyWords == '') {
        this.findEngineerDeviceTree()
      }
      this.edTree = this.edTree.filter(item => item.name.match(this.keyWords))
    }
  },
  created() {
    // 查询工程设备树
    this.findEngineerDeviceTree()
    // this.queryMonthData();
    this.findEngineername()
  }
}
</script>
<style scoped>
.content {
  display: flex;
}
.left {
  width: 30%;
  border-right: 1px solid #b9b7b7;
  padding-right: 20px;
  margin-right: 20px;
}
.right {
  width: 70%;
}
.notice {
  height: 500px;
  line-height: 500px;
  text-align: center;
  font-size: 30px;
  color: #999;
}
</style>